import React from 'react'
import './shoppingCart.less'
import { Modal } from 'antd-mobile';
const alert = Modal.alert;
export default class shoppingCart extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            zzz: true,
            shoppingCart: [],
            money: [],
            num: 1,
            edit: true,
            All: false
        }
    }
    getD = () => {
        this.$postData('/api/goods/getUserCartList',
            {},
            (params) => {
                switch (params.code) {
                    case 100:
                        console.log(params.data)
                        params.data.map((val) => { val.idx = false })
                        this.setState({
                            shoppingCart: params.data
                        })
                        break;
                    default:
                        this.Toast.info(params.msg);
                        break;
                }
            })
    }
    componentDidMount() {
        this.getD()
    }
    xuan(e) {
        this.state.shoppingCart[e].idx = !this.state.shoppingCart[e].idx
        this.setState({
            shoppingCart: this.state.shoppingCart
        })
        for (var i = 0; i < this.state.shoppingCart.length; i++) {
            if (this.state.shoppingCart[i].idx === false) {
                this.setState({
                    All: false
                })
                return false;
            }
        }
        this.setState({
            All: true
        })
    }
    editClick = () => {
        this.setState({
            edit: !this.state.edit
        })
    }
    jia(index, id, e) {
        e.stopPropagation()
        this.$postData('/api/goods/updateCartAdd', { cartId: id, type: 1 }, params => {
            console.log(params)
            switch (params.code) {
                case 100:
                    this.state.shoppingCart[index].num += 1
                    this.setState({
                        shoppingCart: this.state.shoppingCart
                    })
                    break;
                default:
                    this.Toast.info(params.msg);
                    break;
            }
        })
    }
    jian(index, id, e) {
        e.stopPropagation()
        this.$postData('/api/goods/updateCartAdd', { cartId: id, type: 2 }, params => {
            console.log(params)
            switch (params.code) {
                case 100:
                    if (this.state.shoppingCart[index].num > 1) {
                        this.state.shoppingCart[index].num -= 1
                        this.setState({
                            shoppingCart: this.state.shoppingCart
                        })
                    }
                    break;
                default:
                    this.Toast.info(params.msg);
                    break;
            }
        })
    }
    AllClick() {
        this.setState({
            All: !this.state.All
        })
        this.state.All ? this.state.shoppingCart.map((val) => {
            val.idx = false
        }) : this.state.shoppingCart.map((val) => {
            val.idx = true
        })
    }
    GOgo() {
        var ID = ''
        this.state.shoppingCart.map((val) => (
            val.idx ? ID += val.id + ',' : false
        ))
        console.log(ID)
        if (ID === '') { return }
        this.state.edit ? this.$postData('/api/order/toPageByCart', { cartId: ID}, params => {
            console.log(params)
            switch (params.code) {
                case 100:
                    this.props.history.push(`/FillOrder/1/${ID}/''/''/''/''`)
                    break;
                default:
                    this.Toast.info(params.msg);
                    break;
            }

        }) : alert('Delete', '确定要删除吗???', [
            { text: '取消', onPress: () => console.log('cancel'), style: 'default' },
            {
                text: '确定', onPress: () => {
                    this.$postData('/api/goods/deleteCart', { cartIds: ID }, params => {
                        switch (params.code) {
                            case 100:
                                this.getD()
                                break;
                            default:
                                this.Toast.info(params.msg);
                                break;
                        }
                    })
                }
            },
        ]);
    }
    render() {
        return (
            <div className='shoppingCart'>
                <div className='shoppingCart-d1'>
                    <p>购物车</p>
                    <p onClick={this.editClick}>{this.state.edit ? '编辑' : '完成'}</p>
                </div>
                {this.state.shoppingCart.map((val, index) => (<div className='shoppingCart-d2' onClick={this.xuan.bind(this, index)} key={index}>
                    <img className='shoppingCart-d2-i1' src={require(`../../static/img/yuan${val.idx ? '-hov' : ''}.png`)} alt="" />
                    <img className='shoppingCart-d2-i2' src={require("../../static/img/shop2.png")} alt="" />
                    <div className='shoppingCart-d3'>
                        <p className='shoppingCart-d3-p1'>{val.goodsCommonName}</p>
                        <p className='shoppingCart-d2-p2'>{val.specInfo}</p>
                        <div className='shoppingCart-d4'>
                            <p className='shoppingCart-d4-p1'>¥{val.price}</p>
                            <div className='shoppingCart-d5'>
                                <div className='center' onClick={this.jian.bind(this, index, val.id)}>
                                    <img src={require("../../static/img/jian.png")} alt="" />
                                </div>
                                <p>{val.num}</p>
                                <div className='center' onClick={this.jia.bind(this, index, val.id)}>
                                    <img src={require("../../static/img/jia.png")} alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                ))}
                <div className='shoppingCart-d6'>
                    <img onClick={this.AllClick.bind(this)} className='shoppingCart-d6-i1' src={require(`../../static/img/yuan${this.state.All ? '-hov' : ''}.png`)} alt="" />
                    <p onClick={this.AllClick.bind(this)} className='shoppingCart-d6-p1'>全选</p>
                    {this.state.edit ? <div className='shoppingCart-d6-p2'>合计：¥<Money ShopData={this.state.shoppingCart}></Money></div> : <div className='shoppingCart-d6-p2'></div>}
                    <p className='center' onClick={this.GOgo.bind(this)}>{this.state.edit ? '下单' : '删除'}</p>
                </div>
                <div className='diandi'></div>
            </div>
        )
    }
}

class Money extends React.Component {
    state = {
        money: 0
    }
    componentWillReceiveProps(nextProps) {
        this.retusf(0)
    }
    retusf = (money) => {
        this.props.ShopData.map((value) => (
            value.idx ? money += Number(value.num) * Number(value.price) : false
        ))
        this.setState({
            money
        })
        console.log(this.state.money)
    }
    render() {
        return (
            <div>
                {
                    this.props.ShopData.length === 0 ? <div>0</div> : <div>{this.state.money}</div>
                }
            </div>
        )
    }
}